<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tabs</title>
	<script src="../vue.js"></script>
</head>
<style>
	#tabs{
		width: 80%;
		margin: auto;
	}
	.nav{
		font-size: 0;
		width: 100%;
	}
	.nav a{
		display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 25%;
        text-align: center;
        background: #ccc;
        color: #333;
        text-decoration: none;
	}
	.nav .cur{
		background-color: #09f;
		color: #fff;
	}
	.container{
		border: solid 1px #ccc;
		text-align: center;
		height: 300px;
		padding-top: 10px;
	}
</style>
<body>
	<div id="tabs">
		<div class="nav">
			<!-- @click :class v-show vue常用的指令或添加事件的方式" -->
			<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
			<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
			<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
			<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
		</div>
		<div class="container">
			<div v-show="curId===0">html</div>
			<div v-show="curId===1">css</div>
			<div v-show="curId===2">javascript</div>
			<div v-show="curId===3">vue</div>
		</div>
	</div>
</body>
<script>
	new Vue({
		el: '#tabs',
		data:{
			curId:0
		}
	})
</script>
</html>